<template lang="html">
   <div class="">
      <!-- <Headbar class="tour_top"
       :title='title'></Headbar> -->
<Headers class="tour_top"></Headers>
<!-- 引入最上面的导航部分 -->
<Navbar @datachuandi="datachu"></Navbar>
<!-- loading页面 -->
<div class="loading_box" v-if="bol">
   <!-- <h1>loading...</h1> -->
   <Row>
   <Col class="demo-spin-col" span="8">
           <Spin fix>
               <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
               <div>Loading</div>
           </Spin>
      </Col>
   </Row>
</div>
<!-- 岩岩的路由 -->
<!-- <Scroller :on-refresh="refresh" ref="domName"> -->
<router-link to="/lion">
   <!-- 参团游数据部分拼接 -->
   <div class="product_list_box" >
  <div v-for='item of result' class="product_list">
     <div class="wrap">
        <dl class="">
          <dt>
             <div class="img_box">
                <img :src="item.imagePath" alt="">
               <span>北京出发</span>
             </div>
             <strong v-if="item.product_rating_name == '大众型'" class="dz"></strong>
             <strong v-if="item.product_rating_name == '精选型'" class="jx"></strong>
          </dt>
          <dd>
            <ul>
               <li>
                  <strong class="big_title">{{item.product_name}}</strong>
               </li>
               <li>
                  <strong class="title_des">{{item.sub_title}}</strong>
               </li>
               <li>
                  <p class="sign">
                     <em class="blue">{{item.lables.split(',')[0]}}</em>
                     <span v-if="item.lables.split(',')[1] != null" v-show='hidden' class="white" >{{item.lables.split(',')[1]}}</span>

                     <span v-if="item.lables.split(',')[2] != null" v-show='hidden' class="white" >{{item.lables.split(',')[2]}}</span>
                  </p>
               </li>
               <li>
                  <p class="lately1">出发时间 {{item.trip_dates[0]}}</p>
                  <div class="price_box">
                     <strong class="oldprice"><i>￥</i> {{item.lowest_price}}</strong>
                     <p class="new_p">
                        <i class="newprice_p">￥</i>
                        <strong class="newprice1">{{item.lowest_price+"/人起"}}</strong>
                     </p>
                  </div>
               </li>
            </ul>
         </dd>
       </dl>
    </div>
  </div>
</div>
</router-link>
<router-view></router-view>

</div>

</template>

<script>
// 引入导航模块
// import Vue from 'vue'
import Headers from './tour2/header'
import Navbar from './navbar'
// import Scroller from 'vue-scroller'
// Vue.use(Scroller)
export default {
   props:['dataobj'],
   data(){
      return {
         result: {},
         bol : true,
         hidden: true
      }
   },
   components:{
      Navbar,
      Headers
   },
   created(){
      // setTimeout(()=>{
      // this.bol = false;
      // 数据获取接口
      this.axios.get('http://txspring.cn:8080/synthesis').then(data=>{
         this.result = data.data.matches;
         this.bol = false;
      })
      // },2000)
   },
   methods:{
      // 接受从navbar传过来的数据
      datachu(data){
         this.result = data;
      },
      refresh() {
         // console.log('refresh')
      }
   }
}
</script>

<style lang="css" scoped>
/*loading页面*/
.demo-spin-icon-load{
   animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
   from { transform: rotate(0deg);}
   50%  { transform: rotate(180deg);}
   to   { transform: rotate(360deg);}
}
.demo-spin-col{
    height: 100px;
    margin-top: 70%;
    margin-left: 34%;
    position: relative;
    font-size: 2rem;
}

/*.loading_box{
   width: 100%;
   height: 50rem;
   background-color: #fff;
}
.loading_box>h1{
   text-align: center;
   line-height: 50rem;
}*/

/*标题部分*/
.tour_top{
   width: 100%;
   position: fixed;
   top:0;
   z-index: 10;
}
/*产品展示*/
.product_list_box{
   width: 100%;
   margin-top: 7rem;
   position: relative;
   /*z-index: 10;*/
}
.product_list{
   width: 100%;
   height: 13rem;
   border-bottom: #e6e9ed solid 1px;
   background-color: #fff;
}
.product_list .wrap{
   width:95%;
   height:100%;
   margin: auto;
}
.product_list .wrap dl{
   width: 100%;
   display: flex;
}
.product_list .wrap dl>dt{
   margin-top: 1rem;
   width: 9.5rem;
   height:7rem;
   background-color: #f0efe8;
   border-radius: 0.2rem;
   /*position: relative;*/
}
.img_box{
   width: 9.5rem;
   height: 5.5rem;
   display: flex;
   flex-direction: column;
}
.product_list .wrap dl>dt span{
   font-size: 0.8rem;
}
.product_list .wrap dl>dt img{
   border-radius: 0.2rem;
   width: 100%;
   height: 100%;
}
.product_list .wrap dl>dd{
   /*width:20rem;
   height: 12rem;*/
   width:100%;
   margin-left: 0.7rem;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   /*background-color: lightgray;*/
}
.dz{
   width: 5rem;
   height: 2rem;
   /*position: absolute;*/
   top: 0.3rem;
   left: -0.5rem;
   background: url('../../static/imgs/dz.png') no-repeat;
   background-size: 4.5rem;
}
.jx{
   width: 5rem;
   height: 2rem;
   /*position: absolute;*/
   top: 0.3rem;
   left: -0.5rem;
   background: url('../../static/imgs/jx.png') no-repeat;
   background-size: 4.5rem;
}
.product_list .wrap dl>dd ul{
   margin-top: 1rem;
   padding:0;
   width: 100%;
   /*height: 100%;*/
   list-style: none;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   text-overflow: clip;
}
.product_list .wrap dl>dd ul li{
   text-align: left;
   width:100%;
   height:1.8rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   /*background-color: pink;*/
}
.product_list .wrap dl>dd ul li .big_title{
   display: inline-block;
   width: 20rem;
   /*background-color: pink;*/
   color: black;
   font-size: 1.5rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}
.title_des{
   color: #999;
   font-size: 1rem;
   font-weight: lighter;
}
.sign{
   width: 100%;
   height:1.3rem;
   margin-top: 0.2rem;
   font-size: 0.8rem;
   font-family: "微软雅黑","宋体";
   display: flex;
   justify-content:flex-start;
}
.blue{
   width: 4rem;
   border-radius: 0.1rem;
   background-color: #00b0ec;
   color: #fff;
   padding:0.05rem;
   line-height: 1rem;
   text-align: center;
   font-style: normal;
}
.white{
   width: 5rem;
   display: inline-block;
   color: #0099a9;
   border:#0099a9 solid 0.07rem;
   border-radius: 0.2rem;
   padding:0.1rem;
   line-height: 0.9rem;
   text-align: center;
}
.none{
   display: none;
}
.lately1{
   color: #666;
   font-size: 0.8rem;
   text-overflow: clip;
}
.price_box{
   position: absolute;
   right: 0.8rem;
}
.price_box>p>i{
   font-style: normal;
   color: #ff6b01;
}
.newprice1{
   color: #ff6b01;
   font-size: 1.7rem;
   font-family: arial;
   font-weight: normal;
   text-align: right;
   /*background-color: pink;*/
   width:8rem;
   /*float: right;*/
}
.oldprice{
   float: right;
   color: #666;
   font-size: 0.5rem;
   text-decoration: line-through;
}
.new_p{
   width: 8rem;
   position: absolute;
   margin-top: 1rem;
   right: 0;
}
.new_p .newprice_p{
   float: left;
}
</style>
